<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>手机报菜界面</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui-1.5.3/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui-1.5.3/themes/icon.css"/>">
<link rel="stylesheet"
	href="<c:url value="/jsp-mobile/select/css/jquery-accordion-menu.css"/>">
<!-- CSS reset -->
<link rel="stylesheet"
	href="<c:url value="/css_font/fonts/iconfont.css"/>">
<link rel="stylesheet"
	href="<c:url value="/jsp/cashier/css/style.css"/>">
<!-- Resource style -->
<!-- Modernizr -->

<script type="text/javascript"
	src="<c:url value="/jsp/cashier/js/jquery-1.11.2.min.js"/>"></script>
<script src="<c:url value="/jsp/cashier/js/jquery-accordion-menu.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui-1.5.3/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.panel.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.datagrid.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.messager.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/ext-for-framework.js.jsp"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/locale/easyui-lang-zh_CN.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/js/common.js"/>"></script>

<style type="text/css">
.search {
	position: fixed;
	left: 0;
	top: 0;
	background: #1db34e;
	width: 100%;
	height: 10%;
	margin-top: 0px;
	margin-left: 0px;
	padding: 4px;
}

.content_out {
	position: fixed;
	left: 0;
	top: 10%;
	background: #ED5565;
	width: 30%;
	height: 80%;
	margin-top: 0px;
	margin-left: 0px;
	padding: 0;
	overflow: hidden;
}

.content {
	background: #ED5565;
	width: 100%;
	height: 100%;
	margin-top: 0px;
	margin-left: 0px;
	padding: 4px;
	overflow-y: scroll;
}

.look1_out {
	position: fixed;
	left: 30%;
	top: 10%;
	width: 70%;
	height: 80%;
	padding: 0px;
	overflow: hidden;
	background: #fbfbfb;
}

.look1 {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	overflow-y: scroll;
	background: #fbfbfb;
}

.shopping_cart {
	position: fixed;
	left: 0;
	top: 90%;
	width: 100%;
	height: 10%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background: #d4fc74;
}

.products {
	list-style: none;
	margin-right: 2px;
	padding: 0px;
	height: 100%;
	width: 100% text-align: center;
}

.products li {
	display: block;
	width: 100%;
	float: left;
	margin: 0px;
	background: #fbfbfb;
	border-color: #f1f5ee;
	border: 4px solid #fbfbfb;
}

.filterinput {
	outline: medium;
	margin-top: 8px;
	background-color: rgba(249, 244, 244, 0);
	border-radius: 15px;
	width: 90%;
	height: 30px;
	border: thin solid #FFF;
	text-indent: 0.5em;
	font-weight: bold;
	color: #FFF;
}

::-webkit-input-placeholder { /* WebKit browsers */
	color: #FFF;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #FFF;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #FFF;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #FFF;
}

#demo-list a {
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.item {
	display: block;
	text-decoration: none;
}

img {
	border: 0px solid #333;
	border-color: #FFFFFF;
	width: 80px;
	height: 80px;
}

.item p {
	cursor: pointer;
	margin: 0;
	font-weight: bold;
	text-align: left;
	color: #000000;
}

.zhou {
	float: left;
	width: 85%
}

.zhou2 {
	float: left;
	width: 10%
}

.zhou3 {
	width: 20%;
	float: left;
}

.zhou4 {
	width: 60%;
	float: left;
}

.search-btn {
	margin-top: 9px;
	display: inline-block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	background: url(<c:url value = "/images/cashier/seach-icon-green.png"/>);
	/* background: url(<c:url value = "/images/cashier/seach-icon-green.png"/>); */
	background-size: 100%;
}

table {
	text-align: left;
	margin: 0px;
	padding: 0px;
}

tr {
	width: 100%;
	margin: 0px;
	padding: 0px;
	margin: 0px;
}

td {
	text-align: left;
	margin: 0px;
	padding: 0px;
	margin: 0px;
}

.input-add-min {
	background: #f1f5ee;
	border: 0;
	width: 40px;
	height: 15px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	vertical-align: middle;
	float: left;
	line-height: 15px;
}

.div-add {
	-moz-user-select: none;
	cursor: pointer;
	text-align: center;
	width: 15px;
	height: 15px;
	line-height: 15px;
	border: 0;
	float: left;
}

.div-min {
	-moz-user-select: none;
	cursor: pointer;
	text-align: center;
	width: 15px;
	height: 25px;
	line-height: 15px;
	border: 0;
	float: left;
}

.img-add-min {
	cursor: pointer;
	width: 15px;
	height: 15px;
}

.shopping_cart_img {
	margin-top: 2px;
	cursor: pointer;
	width: 35px;
	height: 35px;
	vertical-align: middle;
}

.shopping_cart_red {
	cursor: pointer;
	vertical-align: middle;
	border-radius: 25px;
	background: red;
	color: #FFF;
}

.shopping_cart_part1 {
	position: fixed;
	left: 0;
	width: 25%;
	text-align: center;
}

.shopping_cart_part2 {
	position: fixed;
	left: 25%;
	width: 25%;
	text-align: center;
}

.shopping_cart_part3 {
	position: fixed;
	left: 50%;
	width: 25%;
	text-align: center;
}

.shopping_cart_part4 {
	position: fixed;
	left: 75%;
	width: 25%;
	text-align: center;
}
</style>
<script>
	var limit_fist = 0;
	var initflag = true;
	//js模块
	$(document).ready(function() {
		windowsSize();
		$(window).resize(function() {
			windowsSize();
		});

		//设置iframe的长宽
		init();
	});
	function windowsSize() {
		var a = $("#content_out").width();
		$("#content").css("width", a + 15);

		var b = $("#look1_out").width();
		$("#look1").css("width", b + 5);

	}

	function nofindPhoto(id) {

		var img = document.getElementById(id);
		//img.src="http://localhost:8080/appidnitjb322b2/jsp/cashier/images/shirt1.gif";
		img.src = "http://localhost:8080/appidnitjb322b2/images/zanwutupian.jpg";

		img.onerror = null;
		//img.style.display = 'none';
	}
	function test() {

		alert($('.look1').height());
	}
	function inputKeyUp(value, materId, supId) {
		//alert($('#'+value).val());

	}
	function minimg(materId, supId) {
		$('#inputmater' + materId + supId).val(
				accSub($('#inputmater' + materId + supId).val(), 1));
	}
	function addimg(materId, supId) {
		$('#inputmater' + materId + supId).val(
				accAdd($('#inputmater' + materId + supId).val(), 1));
	}
	function init() {
		var element_div = $("#products");
		//element_div.innerHTML ="";
		var tableul = '';

		//var foodName = document.getElementById("search_food_id").value;
		var dataOneJson;
		var dateone;
		dateone = '{"limit_fist":"' + limit_fist + '"}';
		dataOneJson = JSON.parse(dateone);
		$
				.ajax({
					async : false,
					url : "<c:url value='/selectMobile/initMater.do'/>",
					type : "post",
					dataType : "json",
					data : $.param(dataOneJson),
					success : function(data) {
						if (typeof (data) == 'string') {
							dataJson = JSON.parse(data);
						} else {
							dataJson = data;
						}
						if (dataJson.success) {
							var materList = dataJson.materListForinit;
							for (x in materList) {
								tableul = tableul
										+ '<li onmouseout="this.style.border=\'4px solid #fbfbfb\'" onmouseover="this.style.border=\'4px solid red\'" onclick="test()">'
										+ '<table style="background: #FFF;border: 1px solid #f1f5ee;">'
										+ '<tr><td rowspan="3" width="90px"><img style="cursor: pointer;" onerror="nofindPhoto(\'2\');" id="1" src="<c:url value="/images/test/1.png"/>" /></td>'
										+ '<td width="90%">'
										+ '<p style="font-weight: normal; color: black; font-size: 18px">'
										+ materList[x].materName
										+ '<font size="3">('
										+ materList[x].unit
										+ ')</font></p>'
										+ '</td>'
										+ '<td width="20px">'
										+ '<div style="overflow: hidden; width: 73px; height: 15px; border: 0;">'
										+ '<div class="div-min" id="1l" onselectstart="return false;">'
										+ '<img class="img-add-min"  id="1" onclick="minimg(\''
										+ materList[x].materId
										+ '\',\''
										+ materList[x].supId
										+ '\')"'
										+ 'src="<c:url value="/images/cashier/min-icon.png"/>" />'
										+ '</div>'
										+ '<input class="input-add-min" id="inputmater'
										+ materList[x].materId
										+ materList[x].supId
										+ '"  type="tel" onkeyup="inputKeyUp(this.value,\''
										+ materList[x].materId
										+ '\',\''
										+ materList[x].supId
										+ '\');">'
										+ '<div class="div-add"  id="1r" onselectstart="return false;">'
										+ '<img class="img-add-min"  id="1" onclick="addimg(\''
										+ materList[x].materId
										+ '\',\''
										+ materList[x].supId
										+ '\')" src="<c:url value="/images/cashier/add-icon.png"/>" />'
										+ '</div>'
										+ '</div>'
										+ '</td>'
										+ '</tr>'
										+ '<tr><td colspan="2">'
										+ '<p style="font-weight: normal; color: gray; font-size: 13px">'
										+ "品牌："
										+ materList[x].brands
										+ "    规格："
										+ materList[x].specifications
										+ '</p>'
										+ '</td></tr>'
										+ '<tr><td>'
										+ '<p style="font-weight: bold; color: red; font-size: 16px">￥'
										+ materList[x].materValueUndressed
										+ '</p>' + '</td></tr>'
										+ '</table></li>';
							}

							element_div.append(tableul);
							limit_fist = parseFloat(limit_fist)
									+ parseFloat(10);
							initflag = true;
							;
						}
					}
				});
	}
	//alert($('#look1').height());
	//滚动动态加载数据
	$(document).ready(
					function() {
						//alert($('#jquery-accordion-menu').height());
						//alert($('#look1').height());

						//var a1 =$('.look1').height(); //可是区域的高度
						//var sh = $('.look1')[0].scrollHeight;//滚动的高度，$(this)指代jQuery对象，而$(this)[0]指代的是dom节点
						//alert($('.look1')[0].scrollHeight);
						var range = 1; //距下边界长度/单位px  
						var totalheight = 0;
						$('.look1').scroll(
										function() {
											var srollPos = $('.look1').scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)  
											//alert($('#look1').height());
											//console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
											//console.log("页面的文档高度 ："+$(document).height());  
											//console.log('浏览器的高度：'+$(window).height());
											totalheight = parseFloat($('.look1')
													.height())
													+ parseFloat(srollPos);
											if (($('.look1')[0].scrollHeight - range) <= totalheight) {
												if (!initflag) {
													return;
												}
												initflag = false;
												/* main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");  
												num++; */
												//alert($('#look1').height());
												//alert($('.look1')[0].scrollHeight);
												init();
											}
										});
					});
	function initContent() {
        var element_div = $("#products");
        //element_div.innerHTML ="";
        var tableul = '';

        //var foodName = document.getElementById("search_food_id").value;
        var dataOneJson;
        var dateone;
        dateone = '{"limit_fist":"' + limit_fist + '"}';
        dataOneJson = JSON.parse(dateone);
            $.ajax({
                    async : false,
                    url : "<c:url value='/selectMobile/initContent.do'/>",
                    type : "post",
                    dataType : "json",
                    data : $.param(dataOneJson),
                    success : function(data) {
                        if (typeof (data) == 'string') {
                            dataJson = JSON.parse(data);
                        } else {
                            dataJson = data;
                        }
                        if (dataJson.success) {
                            var materList = dataJson.materListForinit;
                            for (x in materList) {
                                tableul = tableul
                                        + '<li onmouseout="this.style.border=\'4px solid #fbfbfb\'" onmouseover="this.style.border=\'4px solid red\'" onclick="test()">'
                                        + '<table style="background: #FFF;border: 1px solid #f1f5ee;">'
                                        + '<tr><td rowspan="3" width="90px"><img style="cursor: pointer;" onerror="nofindPhoto(\'2\');" id="1" src="<c:url value="/images/test/1.png"/>" /></td>'
                                        + '<td width="90%">'
                                        + '<p style="font-weight: normal; color: black; font-size: 18px">'
                                        + materList[x].materName
                                        + '<font size="3">('
                                        + materList[x].unit
                                        + ')</font></p>'
                                        + '</td>'
                                        + '<td width="20px">'
                                        + '<div style="overflow: hidden; width: 73px; height: 15px; border: 0;">'
                                        + '<div class="div-min" id="1l" onselectstart="return false;">'
                                        + '<img class="img-add-min"  id="1" onclick="minimg(\''
                                        + materList[x].materId
                                        + '\',\''
                                        + materList[x].supId
                                        + '\')"'
                                        + 'src="<c:url value="/images/cashier/min-icon.png"/>" />'
                                        + '</div>'
                                        + '<input class="input-add-min" id="inputmater'
                                        + materList[x].materId
                                        + materList[x].supId
                                        + '"  type="tel" onkeyup="inputKeyUp(this.value,\''
                                        + materList[x].materId
                                        + '\',\''
                                        + materList[x].supId
                                        + '\');">'
                                        + '<div class="div-add"  id="1r" onselectstart="return false;">'
                                        + '<img class="img-add-min"  id="1" onclick="addimg(\''
                                        + materList[x].materId
                                        + '\',\''
                                        + materList[x].supId
                                        + '\')" src="<c:url value="/images/cashier/add-icon.png"/>" />'
                                        + '</div>'
                                        + '</div>'
                                        + '</td>'
                                        + '</tr>'
                                        + '<tr><td colspan="2">'
                                        + '<p style="font-weight: normal; color: gray; font-size: 13px">'
                                        + "品牌："
                                        + materList[x].brands
                                        + "    规格："
                                        + materList[x].specifications
                                        + '</p>'
                                        + '</td></tr>'
                                        + '<tr><td>'
                                        + '<p style="font-weight: bold; color: red; font-size: 16px">￥'
                                        + materList[x].materValueUndressed
                                        + '</p>' + '</td></tr>'
                                        + '</table></li>';
                            }

                            element_div.append(tableul);
                            limit_fist = parseFloat(limit_fist)
                                    + parseFloat(10);
                            initflag = true;
                            ;
                        }
                    }
                });
    }
</script>
</head>
<body style="margin: 0; padding: 0; height: 100%; background: #fbfbfb;">
	<div class="search">
		<div class="jquery-accordion-menu-header" id="form">
			<div class="zhou">
				<input id='search_food_id' onKeyUp="search_onkeyUp()" type="text"
					placeholder="搜索" class="filterinput" />
			</div>
			<div class="zhou2">
				<span class="search-btn" onclick="search_food_all()"></span>
			</div>
		</div>
	</div>
	<div class="content_out" id="content_out">
		<div class="content" id="content">
			<div id="jquery-accordion-menu" class="jquery-accordion-menu red">
				<ul id="demo-list">
					<li><a href="#">新鲜蔬菜 </a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#">新鲜蔬菜 </a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>

				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>新鲜蔬菜
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
				<ul id="demo-list">
					<li><a href="#"> <i class="icon iconfont icon-zhu"></i>测试
					</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 主体部分 商品显示 -->

	<div class="look1_out" id="look1_out">
		<div class="look1" id="look1">
			<table width="97%">
				<tr>
					<td>
						<!-- <p class="icon iconfont icon-zhu" style="margin-left: 10px;">测试</p> -->
						<ul class="products" id='products'>
							<%-- <li onmouseout="this.style.border='4px solid #fbfbfb'" onmouseover="this.style.border='4px solid red'" onclick="test()">
								<table style="background: #FFF;border: 1px solid #f1f5ee;">
									<tr>
										<td rowspan="3" width="90px"><img
											style="cursor: pointer;" onerror="nofindPhoto('2');" id="1"
											src="<c:url value="/images/test/1.png"/>" /></td>
										<td width="90%">
											<p style="font-weight: normal; color: black; font-size: 18px">土豆 <font size="3">(斤)</font></p>
										</td>
										<td width="20px">
                                            <div style="overflow: hidden; width: 73px; height: 15px; border: 0;">
                                                <div class="div-min" id="1l" onselectstart="return false;">
                                                    <img class="img-add-min"  id="1" onclick="minimg('inputvalue1')"
                                                        src="<c:url value="/images/cashier/min-icon.png"/>" />
                                                </div>
                                                <input class="input-add-min" id="inputvalue1"  type='tel' onkeyup="inputKeyUp('inputvalue1');">
                                                <div class="div-add"  id="1r" onselectstart="return false;">
                                                    <img class="img-add-min"  id="1" onclick="addimg('inputvalue1')"
                                                        src="<c:url value="/images/cashier/add-icon.png"/>" />
                                                </div>
                                            </div>
                                        </td>
									</tr>
									<tr>
										<td colspan="2">
											<p style="font-weight: normal; color: gray; font-size: 13px">测试测试商品的名字测试商名字</p>
										</td>
									</tr>
									<tr>
										<td>
											<p style="font-weight: bold; color: red; font-size: 16px">￥1</p>
										</td>
									</tr>
								</table>
						</li> --%>
						</ul>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="shopping_cart" class="shopping_cart">
		<div class="jquery-accordion-menu-header" id="form">
			<div class="shopping_cart_part1">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/home.png"/>" onclick="test();" />
				<p>
					<font color="#7b7b7b" size="1">主页</font>
				</p>
			</div>
			<div class="shopping_cart_part2">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/sale.png"/>" />
				<p>
					<font color="#7b7b7b" size="1">促销</font>
				</p>
			</div>
			<div class="shopping_cart_part3">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/mine.png"/>" />
				<p>
					<font color="#7b7b7b" size="1">我的</font>
				</p>
			</div>
			<div class="shopping_cart_part4">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/shopping.png"/>" /> <span
					class="shopping_cart_red"> &nbsp121&nbsp</span>
				<p>
					<font color="#7b7b7b" size="1">购物车</font>
				</p>
			</div>
		</div>
		<!-- <span class="12314" style="border-radius:25px;;background:red; "> &nbsp121&nbsp</span> -->
	</div>
</body>
</html>